<template>
  <div>
    <div>
      <div v-for="item in nowList" :key="item.name">{{ item.name }}</div>
    </div>
    <wind-pagination
      class="pagination"
      :total-num="testList.length"
      :total-list="testList"
      :show-num="showNum"
      :one-page-num="onePageNum"
      @now-list="getNowList"
      @now-page="getNowPage"
    ></wind-pagination>

    <!-- <wind-dialog
      :show="show"
      :mask-close="maskClose"
      :mask-color="maskColor"
      :align-x="alignX"
      :align-y="alignY"
      :opacity="opacity"
      :animation="animation"
    >
      <div class="text"><img src="./assets/1656490339745.png" /></div>
    </wind-dialog> -->
    <button @click="showTest" class="button"></button>
    <button @click="showPar" class="button"></button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { windPagination, windDialog, slayerDialog } from 'windslayer-ui'
import Test from './test/test.vue'
import Parent from './test/parent.vue'

let show = ref(true)
let maskClose = ref(true)
let maskColor = ref('rgb(189, 67, 67)')
let alignX = ref('')
let alignY = ref('')
let opacity = 0.5
let animation = ref('fade-down')

function showPar() {
  slayerDialog(Parent).show({ maskClose: true })
}

function showTest() {
  slayerDialog(Test).show()
}

let showNum = 7
let onePageNum = 1
const testList = [
  {
    name: 1,
  },
  {
    name: 2,
  },
  {
    name: 3,
  },
  {
    name: 4,
  },
  {
    name: 5,
  },
  {
    name: 6,
  },
  {
    name: 7,
  },
  {
    name: 8,
  },
  {
    name: 9,
  },
  {
    name: 10,
  },
  {
    name: 11,
  },
  {
    name: 12,
  },
  {
    name: 13,
  },
  {
    name: 14,
  },
]

const nowList = ref([])

function getNowList(list: Array<Object>) {
  nowList.value = list
}

function getNowPage(page: Number) {
  console.log(page)
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.text {
  font-size: 69px;
}

.button {
  width: 35vw;
  height: 35vw;
}
</style>
